<template>
  <div ref="lyechartmain" style="width: 100%;height: 280px"></div>
</template>

<script setup>
// vue
import { nextTick, onBeforeUnmount, onMounted, ref } from "vue"
import { getHomeIndexChartDataByAdmin } from "~/api/home/index"

// 按需引入echarts
// import echarts from "@/components/analysis/echartsInstall";
import * as echarts from "echarts"
import { type } from "windicss/utils";
let myChart = null
let option = {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {},
  toolbox: {
    feature: {
      // saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {},
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: {}
};
let lyechartmain = ref(null)

const legend = ref({})
const xAxis = ref({})
const series = ref({})

onMounted(() => {//需要获取到element,所以是onMounted的Hook


  setTimeout(() => {
    nextTick(() => {
      // 获取首页数据
      getHomeIndexChartDataByAdmin({}).then((res) => {
        let chart_data = res.data.chart_data
        legend.value = {
          data:['用户']
        }
        
        
        var week_keys = Object.keys(chart_data.weekly_data)
        var week_values = week_keys.map( (key)  => {
            return chart_data.weekly_data[key];
        });

        xAxis.value = {
          type: 'category',
          boundaryGap: false,
          data: week_keys
        }
        series.value = [
          {
            name: '发布量',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: week_values
          },
          // {
          //   name: '发布视频',
          //   type: 'line',
          //   stack: 'Total',
          //   areaStyle: {},
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   data:week_values
          // },
        ]

        option.legend = legend.value
        option.xAxis = xAxis.value
        option.series = series.value


        myChart = echarts.init(lyechartmain.value);
        myChart.setOption(option);
      })

    })
  }, 300)
  // myChart = echarts.init(document.getElementById("lyechartmain"));
  // // 绘制图表
  // myChart.setOption(option);
  window.onresize = function () {//自适应大小
    if (myChart) {
      myChart.resize();
    }
  };
});
onBeforeUnmount(() => {
  window.onresize = null;
})
function handleResize() {
  if (myChart) {
    myChart.resize();
  }
}
defineExpose({
  handleResize
})
</script>

<style scoped></style>